<template>
	<view class="page">
		<view class="sticky">
			<u-tabs
			:current="currentIndex"
			:list="tabList"
			lineColor="#E81526"
			lineWidth="60rpx"
			lineHeight="6rpx"
			:activeStyle="{
				color: '#E81526'
			}"
			@click="tabClick"></u-tabs>
			<view class="nav l-f l-row-sb">
				<view 
				@click="changeNav(0)"
				class="nav_item l-f1 l-f l-row-c"
				hover-class="hover">
					<text 
					class="nav_item_label"
					:class="currentNavIndex === 0 ? 'nav_item_active' : ''">综合</text>
				</view>
				<view 
				@click="changeNav(1)"
				class="nav_item l-f1 l-f l-row-c"
				hover-class="hover">
					<text 
					class="nav_item_label"
					:class="currentNavIndex === 1 ? 'nav_item_active' : ''">价格</text>
					<view class="l-f l-column l-mg-left6">
						<uni-icons type="top" size="22rpx" :color="currentNavIndex === 1 && priceSrot === 'asc' ? '#E81526' : '#666666'"></uni-icons>
						<uni-icons type="bottom" size="22rpx" :color="currentNavIndex === 1 && priceSrot === 'desc' ? '#E81526' : '#666666'"></uni-icons>
					</view>
				</view>
				<view 
				@click="changeNav(2)"
				class="nav_item l-f1 l-f l-row-c"
				hover-class="hover">
					<text 
					class="nav_item_label"
					:class="currentNavIndex === 2 ? 'nav_item_active' : ''">销量</text>
					<view class="l-f l-column l-mg-left6">
						<uni-icons type="top" size="22rpx" :color="currentNavIndex === 2 && salesSrot === 'asc' ? '#E81526' : '#666666'"></uni-icons>
						<uni-icons type="bottom" size="22rpx" :color="currentNavIndex === 2 && salesSrot === 'desc' ? '#E81526' : '#666666'"></uni-icons>
					</view> 
				</view>
			</view>
		</view>
		<no-data v-if="loadEnd && listData.length === 0" :center="true" />
		<template v-else>
			<view  class="list l-f l-wrap">
				<list-item
				 v-for="(item,index) in listData"
				 :key="item.id"
				 :options="item"/>
			</view>
			<uni-load-more :status="loadStatus" iconType="snow"></uni-load-more>
		</template>
	</view>
</template>

<script>
	import {getCategoryListApi, getCategoryGoodsListApi} from '@/api/category.js'
	import ListItem from '@/pages/aPackage/categoryList/components/listItem/listItem.vue'
	import {scrollTo} from '@/utils/utils.js'
	export default {
		components: {
			ListItem
		},
		data() {
			return {
				cat_id: '',
				currentIndex: 0,
				tabList: [],
				currentNavIndex: 0,
				priceSrot: 'asc',
				salesSrot: 'asc',
				listData: [],
				loadStatus: 'loading',
				loadEnd: false,
				page: 1,
				limit: 6
			};
		},
		onLoad({cat_id = '', index = 0}) {
			this.cat_id = cat_id
			this.currentIndex = parseInt(index)
			this.getCategoryListData(cat_id)
		},
		onPullDownRefresh() {
			this.loadEnd = false
			this.page = 1
			this.getListData()
		},
		onReachBottom() {
			if(this.loadEnd) return
			this.page++
			this.getListData()
		},
		methods: {
			tabClick({id = ''}) {
				this.cat_id = id
				this.page = 1
				this.getListData(true)
			},
			// 获取分类
			async getCategoryListData(cat_id = '') {
				const res = await getCategoryListApi({cat_id})
				this.tabList = res.data.navData
				this.cat_id = this.tabList[this.currentIndex].id
				this.getListData()
			},
			// 切换
			changeNav(index) {
				if(this.currentNavIndex === 1) {
					this.priceSrot = this.priceSrot === 'asc' ? 'desc' : 'asc'
				}
				if(this.currentNavIndex === 2) {
					this.salesSrot = this.salesSrot === 'asc' ? 'desc' : 'asc'
				}
				this.currentNavIndex = index
				this.page = 1
				this.getListData(true)
			},
			// 获取分类下商品列表
			async getListData(isToTop = false) {
				if(isToTop) {
					scrollTo(0,300)
				}
				this.loadStatus = 'loading'
				let order = 'desc'
				let type = null
				switch(this.currentNavIndex) {
					case 0:
						order = 'desc'
						type = null
					break;
					case 1:
						order = this.priceSrot
						type = 'price'
					break;
					case 2:
						order = this.salesSrot
						type = 'sales'
					break;
				}
				const res = await getCategoryGoodsListApi({
					cat_id: this.cat_id,
					order: order,
					user_id: this.user_id,
					type: type,
					page: this.page
				})
				uni.stopPullDownRefresh()
				this.loadStatus = 'more'
				if(this.limit > res.data.data.length) {
					this.loadEnd = true
					this.loadStatus = 'noMore'
				}
				if(this.page === 1) {
					this.listData = res.data.data
					return
				}
				this.listData = this.listData.concat(res.data.data)
			},
		}
	}
</script>
<style lang="scss" scoped>
@import "@/pages/aPackage/categoryList/categoryList.scss";
</style>
